<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <span v-if="beautiful" title="黄总很丑吗？">
            那我走
        </span> -->

        <!-- <ul>
            <li v-for="item in toDos">{{item.taskName}}</li>
        </ul> -->

        <form>
            <table>
                <tr>
                    <td><label for="">用户名：</label></td>
                    <td><input type="text" v-model="formData.username"></td>
                </tr>
                <tr>
                    <td><label for="">密码：</label></td>
                    <td><input type="text" v-model="formData.password"></td>
                </tr>
            </table>
        </form>
        <label for="">{{str}}</label>

        <table>
            <todo-item v-for="item in toDos" v-bind:ch=item></todo-item>
        </table>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        Vue.component('todo-item', {
            props: ['ch'],
            template: `
            <tr>
                <td>{{ch.id}}</td>
                <td>{{ch.taskName}}</td>
            </tr>
            `
        })

        let app = new Vue({
            el: "#app",
            data() {
                return {
                    beautiful: true,
                    need: true,
                    formData: {
                        username: "",
                        password: ""
                    },
                    toDos: [
                        {
                            id:1,
                            taskName: '跟照片差别有点大呀?'
                        }, {
                            id:2,
                            taskName: '我很丑吗？我很丑吗？'
                        }, {
                            id:3,
                            taskName: '那我走？那我走？'
                        }, {
                            id:4,
                            taskName: '哎！！！！'
                        },
                    ]
                }
            },
            computed: {
                str: function () {
                    return `gg:${this.formData.username}hh:${this.formData.password}`
                }
            }
        })
    </script>

</body>

</html>